<script setup lang="ts">
import { getImageListByClassId, updateImageName, deleteImage } from '@/api/image_class'
import { showPrompt, showMessage } from '@/utils/elementTools'
import UploadImage from '@/components/image/UploadImage.vue'

const showDrawer = ref(false)

const handleOpenUpload = () => (showDrawer.value = true)

const loading = ref(false)
const image_class_id = ref(0)
const list = ref([])

// 分页
const currentPage = ref(1)
const total = ref(0)
const limit = ref(10)

// 获取数据
function getData(p: number = 1) {
  currentPage.value = p
  loading.value = true
  getImageListByClassId(image_class_id.value, currentPage.value, limit.value)
    .then((res) => {
      list.value = res.data.list.map((item: any) => {
        item.checked = false
        return item
      })
      total.value = res.data.totalCount
    })
    .finally(() => {
      loading.value = false
    })
}

// 根据分类id加载数据
const loadData = (class_id: number) => {
  currentPage.value = 1
  image_class_id.value = class_id
  getData()
}
// 重命名
const handleEdit = (item) => {
  showPrompt('请直接修改名称', item.name, '改名').then(({ value }) => {
    loading.value = true
    updateImageName(item.id, value)
      .then(() => {
        showMessage('修改成功')
        getData()
      })
      .finally(() => {
        loading.value = false
      })
  })
}
// 删除图片
const handleDelete = (id: number) => {
  loading.value = true
  deleteImage([id])
    .then(() => {
      showMessage('删除成功')
      getData()
    })
    .finally(() => {
      loading.value = false
    })
}
// 上传成功后刷新数据
const handleUploadSuccess = (res: any) => {
  // console.log(res)
  // showDrawer.value = false
  getData()
}
defineProps({
  openChoose: {
    type: Boolean,
    default: false
  }
})
// 选中图片
const emit = defineEmits(['choose'])
const checkedImage = computed(() => {
  return list.value.filter((item: any) => item.checked)
})
const handleChoose = (item: any) => {
  if (item.checked && checkedImage.value.length > 1) {
    item.checked = false
    return showMessage('只能选择一张图片', 'error')
  }
  emit('choose', checkedImage.value)
}
defineExpose({ loadData, handleOpenUpload })
</script>

<template>
  <el-main class="image-main" v-loading="loading">
    <div class="top">
      <el-row :gutter="0">
        <el-col :span="6" v-for="item in list" :key="item.id">
          <el-card shadow="hover" class="card" :class="{ active: item.checked }" :body-style="{ padding: 0 }">
            <el-image :src="item.url" fit="cover" class="card-image" :preview-src-list="[item.url]" :initial-index="0"></el-image>
            <div class="image-title">{{ item.name }}</div>
            <div class="btn">
              <el-checkbox v-model="item.checked" v-if="openChoose" @change="handleChoose(item)">选择</el-checkbox>
              <el-button type="primary" text size="small" @click="handleEdit(item)" v-show="!openChoose">重命名</el-button>
              <el-popconfirm title="是否确认要删除吗?" @confirm="handleDelete(item.id)">
                <template #reference>
                  <el-button v-show="!openChoose" type="primary" text size="small">删除</el-button>
                </template>
              </el-popconfirm>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <div class="bottom">
      <el-pagination
        background
        layout="prev,pager, next"
        :total="total"
        :current-page="currentPage"
        :page-size="limit"
        @current-change="getData"
      />
    </div>
    <el-drawer v-model="showDrawer" title="上传图片">
      <UploadImage :data="{ image_class_id }" @success="handleUploadSuccess" />
    </el-drawer>
  </el-main>
</template>

<style lang="scss" scoped>
.image-main {
  border-right: 1px solid #eee;
  position: relative;
  .top {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 50px;
    overflow-y: auto;
    .card {
      margin: 10px;
      position: relative;
      .image-title {
        position: absolute;
        top: 122px;
        left: -1px;
        right: -1px;
        padding: 5px 10px;
        color: #ccc;
        background-color: rgba(0, 0, 0, 0.5);
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
      }

      .card-image {
        width: 100%;
        height: 150px;
      }

      .btn {
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    .active {
      border: 1px solid #235586;
    }
  }
  .bottom {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
